// 江青青博客里面的  LayoutAnimation的使用放大图片操作，三种方式演变过程
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    LayoutAnimation,
    TouchableHighlight,
    ToastAndroid,
    Platform,
    UIManager
} from 'react-native';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            width: 100,
            height: 100
        };
    }

    //startAnimation = ()=> {
    //    var count = 0;
    //    while (++count < 50) {
    //        // 第一种动画方式
    //        //requestAnimationFrame(()=> {
    //        //    this.setState({
    //        //        width: this.state.width + 1,
    //        //        height: this.state.height + 1
    //        //    });
    //        //});
    //
    //
    //        // 第二种动画方式
    //        requestAnimationFrame(()=>{
    //            //setNativeProps没有重新渲染组件
    //            this.refs.image1.setNativeProps({
    //                style: {
    //                    width: this.state.width++,
    //                    height: this.state.height++
    //                }
    //        });
    //    });
    //    }
    //}

    startAnimation=()=> {
        //第三种动画方式
        LayoutAnimation.configureNext({
            duration: 700, //持续时间
            create: { // 视图创建
                type: LayoutAnimation.Types.spring,
                property: LayoutAnimation.Properties.scaleXY,// opacity、scaleXY
            },
            update: { // 视图更新
                type: LayoutAnimation.Types.easeInEaseOut,
            },
        });
        this.setState({width: this.state.width + 10, height: this.state.height + 10});
    }

    render() {
        return (
            <View style={styles.container}>
                <Image ref="image1" source={ require('../../../images/1.jpg') }
                       style={{width: this.state.width, height: this.state.height}}/>
                <TouchableOpacity  onPress={()=>this.startAnimation()}>
                    <Text style={{alignSelf: 'center', color: 'green'}}>Press me!</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});